<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="p" uri="/WEB-INF/tld/page.tld" %>
<!DOCTYPE html>

<!--[if IEMobile 7]><html class="no-js iem7 oldie"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if (IE 9)&!(IEMobile)]><html class="no-js ie9" lang="en"><![endif]-->
<!--[if (gt IE 9)|(gt IEMobile 7)]><!--><html class="no-js" lang="en"><!--<![endif]-->

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>文化创意产业项目虚拟仿真实验教学系统</title>
	<%@include file="/header.jsp" %>
	<script type="text/javascript" src="/js/init.js"></script>
	<script type="text/javascript">
		$(function() {
			activeMenu(5);
			
			$("#teacher-table").find("input[name='teacherId']").click(function() {
				var teacherId = $(this).val();
				$("#student-div").load("/teach/loadStudents/"+teacherId);
			})
		})
		
		function viewUser(id, type) {
			if(type==1) 
				title = "查看教师";
			else if(type==2)
				title = "查看学生";
			var modal = $.modal({
				title: title,
				url: '/teach/load/'+id,
				width: 500,
				ajax: {
					success: function()
					{
						modal.centerModal();
					}
				},
				buttons: {
					'关闭': {
						classes: 'small blue-gradient glossy center',
						click: function(win) { win.closeModal(); }
					}
				}
			});
		}
		
		function addStudent(id) {
			var modal = $.modal({
				title: "添加学生",
				url: '/teach/studentList?teacherId='+id,
				width: 1000,
				ajax: {
					success: function()
					{
						modal.centerModal();
					}
				},
				buttons: {
					'关闭': {
						classes: 'small blue-gradient glossy center',
						click: function(win) {
							$("#student-div").load("/teach/loadStudents/"+id, function() {
								win.closeModal();
							});
						}
					}
				}
			});
		}
		
		function delStudent(studentId) {
			var teacherId = $('input[name="teacherId"]:checked').val();
			$.ajax({
				url:"/teach/deleteRelation/"+studentId+"-"+teacherId,
				dataType:"json"
			}).done(function(data){
				myalert(data.msg);
				if(data.isSuccess)
					$("#student-div").load("/teach/loadStudents/"+teacherId);
			})
		}
		
	</script>
</head>

<body class="clearfix with-menu with-shortcuts">

	<!-- Prompt IE 6 users to install Chrome Frame -->
	<!--[if lt IE 7]><p class="message red-gradient simpler">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

	<!-- Title bar -->
	<header role="banner" id="title-bar">
		<h2>Developr</h2>
	</header>

	<!-- Button to open/hide menu -->
	<a href="#" id="open-menu"><span>Menu</span></a>

	<!-- Button to open/hide shortcuts -->
	<a href="#" id="open-shortcuts"><span class="icon-thumbs"></span></a>

	<!-- Main content -->
	<section role="main" id="main">

		<noscript class="message black-gradient simpler">Your browser does not support JavaScript! Some features won't work as expected...</noscript>

		<hgroup id="main-title" class="thin">
			<h1>教师学生列表</h1>
		</hgroup>

		<div class="with-padding">
			<div class="columns">
			<div class="new-row-mobile four-columns four-columns-tablet nine-columns-mobile">
	
				<div class="block large-margin-bottom">
					<div class="block-title">
						<h3>教师列表</h3>
					</div>
					<table class="table responsive-table" id="teacher-table">
		
						<thead>
							<tr>
								<th scope="col">&emsp;</th>
								<th scope="col">用户名</th>
								<th scope="col">操作</th>
							</tr>
						</thead>
		
						<tbody>
							<c:forEach items="${teacherPage.list }" var="teacher">
								<tr>
									<td><input type="radio" name="teacherId" value="${teacher.id }"></td>
									<td>${teacher.username }</td>
									<td>
										<span class="button-group compact">
											<a href="javascript:;" class="button" onclick='viewUser("${teacher.id}", "${teacher.type }")'>查看</a>
											<a href="javascript:;" class="button" onclick='addStudent("${teacher.id}")'>添加学生</a>
										</span>
									</td>
								</tr>
							</c:forEach>
						</tbody>
		
					</table>
		
					<div class="dataTables_footer">
						<div class="dataTables_info" id="sorting-advanced_info">
							第${teacherPage.pageNumber }/${teacherPage.totalPage }页,共${teacherPage.totalRow }条记录
						</div>
						<p:page totalRow="${teacherPage.totalRow }" pageNumber="${teacherPage.pageNumber }"
							 totalPage="${teacherPage.totalPage }"></p:page>
					</div>
				</div>
			</div>
			
			<div class="new-row-mobile eight-columns eight-columns-tablet fifteen-columns-mobile" id="student-div">
			</div>
			</div>
			
		</div>
		
		
	</section>
	<!-- End main content -->

	<script>

		// Call template init (optional, but faster if called manually)
		$.template.init();
		
	</script>
</body>
</html>